<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Progress 进度条</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">直线进度条</el-divider><!-- =============================================================== -->
	<p class="desc">Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。 你可以通过设置 format 来自定义文字显示的格式。</p>
	<div class="demo-progress">
		<el-progress :percentage="50"></el-progress>
		<el-progress :percentage="100" :format="format"></el-progress>
		<el-progress :percentage="100" status="success"></el-progress>
		<el-progress :percentage="100" status="warning"></el-progress>
		<el-progress :percentage="50" status="exception"></el-progress>
	</div>
	
	<el-divider content-position="left">进度条内显示百分比标识</el-divider><!-- =============================================================== -->
	<p class="desc">百分比不占用额外控件，适用于文件上传等场景。</p>
	<p class="desc">Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。</p>
	<div class="demo-progress">
		<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
		<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
		<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
	</div>
	
	<el-divider content-position="left">自定义进度条的颜色</el-divider><!-- =============================================================== -->
	<p class="desc">可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。</p>
	<div class="demo-progress">
		<el-progress :percentage="percentage" :color="customColor"></el-progress>
		<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
		<el-progress :percentage="percentage" :color="customColors"></el-progress>
		<el-progress :percentage="percentage" :color="customColors"></el-progress>
		
		<el-button-group>
			<el-button :icon="Icons.Minus" @click="decrease"></el-button>
			<el-button :icon="Icons.Plus" @click="increase"></el-button>
		</el-button-group>
	</div>
	
	<el-divider content-position="left">环形进度条</el-divider><!-- =============================================================== -->
	<p class="desc">Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。</p>
	<div class="demo-progress">
		<el-progress type="circle" :percentage="0"></el-progress>
		<el-progress type="circle" :percentage="25"></el-progress>
		<el-progress type="circle" :percentage="100" status="success"></el-progress>
		<el-progress type="circle" :percentage="70" status="warning"></el-progress>
		<el-progress type="circle" :percentage="50" status="exception"></el-progress>
	</div>
	
	<el-divider content-position="left">仪表盘形进度条</el-divider><!-- =============================================================== -->
	<p class="desc">您也可以指定 type 属性到 dashboard 使用控制面板进度栏。</p>
	<div class="demo-progress">
		<el-progress type="dashboard" :percentage="percentage" :color="customColors"></el-progress>
		<el-progress type="dashboard" :percentage="percentage2" :color="customColors"></el-progress>
		
		<el-button-group>
			<el-button :icon="Icons.Minus" @click="decrease"></el-button>
			<el-button :icon="Icons.Plus" @click="increase"></el-button>
		</el-button-group>
	</div>
	
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">通过默认插槽添加自定义内容。</p>
	<div class="demo-progress">
		<el-progress :percentage="50">
			<el-button>按钮</el-button>
		</el-progress>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
			<span>Content</span>
		</el-progress>
		<el-progress type="circle" :percentage="100" status="success">
			<el-button type="success" :icon="Icons.Check" circle></el-button>
		</el-progress>
		<el-progress type="dashboard" :percentage="80">
			<template #default="{ percentage }">
				<span class="percentage-value">{{ percentage }}%</span>
				<span class="percentage-label">Progressing</span>
			</template>
		</el-progress>
	</div>
	
	<el-divider content-position="left">动画进度条</el-divider><!-- =============================================================== -->
	<p class="desc">使用 intermediate 属性来设置不确定的进度， duration 来控制动画持续时间。</p>
	<div class="demo-progress">
		<el-progress :percentage="50" :indeterminate="true"></el-progress>
		<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
		<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
		<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
		<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
	</div>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			percentage: 20,
			percentage2: 0,
			customColor: '#409eff',
			customColors: [
				{ color: '#f50431', percentage: 20 },
				{ color: '#a19893', percentage: 40 },
				{ color: '#c78529', percentage: 60 },
				{ color: '#6cdd38', percentage: 80 },
				{ color: '#099e20', percentage: 100 },
			],
			
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			setInterval(this.modifyPercentage, 500);
			
		})
	},
	computed: {
		format(){
			return function(percentage){
				return percentage === 100 ? 'Full' : `${percentage}%`
			}
		},
		customColorMethod0(){
			return function(percentage){
				if (percentage < 30) {
					return '#909399'
				}
				if (percentage < 70) {
					return '#e6a23c'
				}
				return '#67c23a'
			}
		},
		customColorMethod(){
			return function(percentage){
				let num = 255 -  Math.ceil(percentage * 2.55);
				let str = num.toString(16);
				let str1 = str;
				let str2 = str;
				let str3 = str;
				return '#' + str1 + str2 + str3;
			}
		},
		
	},
	methods:{
		decrease(){
			this.percentage -= 10;
			if(this.percentage < 0){
				this.percentage = 0;
			}
		},
		increase(){
			this.percentage += 10;
			if(this.percentage > 100){
				this.percentage = 100;
			}
		},
		modifyPercentage(){
			this.percentage2 = (this.percentage2 % 100) + 10;
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>